<style lang="less">
.search-recommend {
    .keyword-name {
        width: 300px;
    }
    .recommend-list {
        display: inline-block;
        vertical-align: middle;
        border: 2px solid #ccc;
        border-radius: 5px;
        width: 100px;
        height: 50px;
        padding: 10px;
        padding-right: 20px;
        margin: 5px;
        position: relative;
        .image-item {
            position: absolute;
            display: flex;
            justify-content: space-around;
            width: 100%;
            height: 20px;
            left: 0;
            bottom: 2px;
            img {
                width: 20px;
                vertical-align: middle;
            }
        }
    }
    .editor-recommend-list {
        display: block;
        width: auto;
        height: 50px;
        line-height: 50px;
        .image-item {
            display: inline-block;
            width: auto;
            position: relative;
            float: right;
            img {
                padding: 5px;
            }
        }
    }
}
</style>

<template>
    <div class="search-recommend">
        <draggable
            @start="drag=true"
            @end="drag=false"
            v-model="itemsData">
            <div v-for="item in itemsData" class="recommend-list" :class="{'editor-recommend-list': type < 3}">
                <span>{{ item.label }}</span>
                <span class="image-item">
                    <router-link :to="'/keyword-materials/'+item.label_id">
                        <img src="../../img/management2.png"/>
                    </router-link>
                    <img src="../../img/edit2.png" @click="editItem(item)"/>
                    <img src="../../img/delete2.png" @click="deleteItem(item)" />
                </span>
            </div>
        </draggable>
        <el-dialog :title="type > 2 ?  '添加搜索推荐' : '添加编辑推荐'" :visible.sync="ifVisible">
            <el-form :model="editData">
                <el-form-item label="关键词ID">
                    <el-select
                        class="keyword-name"
                        v-model="editData.label_id"
                        filterable
                        remote
                        reserve-keyword
                        placeholder="请输入关键词ID或关键词"
                        :remote-method="remoteMethod"
                        :loading="loading">
                        <el-option
                        v-for="item in options"
                        :key="item.label_id"
                        :label="item.label"
                        :value="item.label_id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="推荐时间">
                    <DatePicker
                        v-model="editData.start_time"
                        type="datetime"
                        placeholder="选择开始日期">
                    </DatePicker>
                    <DatePicker
                        v-model="editData.end_time"
                        type="datetime"
                        placeholder="选择结束日期">
                    </DatePicker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="ifVisible=false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import KeywordRecommendModel from '../../models/keyword-recommend';
import KeywordModel from '../../models/keyword';

export default {
    props: {
        itemsData: {
            type: Array,
            default() {
                return [];
            }
        },
        type: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            ifVisible: false,
            options: [],
            loading: false,
            keywordQuery: {
                is_show: '-1',
                is_debug: '-1',
                group_id: '',
                material_id: ''
            },
            recommendQuery: {
                style: '',
                img_url: '',
                width: '',
                height: '',
                sort_num: '',
                jump_type: '',
                jump_param: ''
            },
            editData: {}
        };
    },
    components: {
        draggable: require('vuedraggable'),
        DatePicker: require('../date-picker')
    },
    methods: {
        deleteItem(item) {
            this.$emit('deleteItem', item);
        },
        editItem(item) {
            if(!item) {
                this.editData = Object.assign({}, {
                    label_id: '',
                    start_time: this.getDateTime().todayM,
                    end_time: this.getDateTime().todayN
                });
                this.ifVisible = true;
                return;
            }

            this.editData = item;
            this.ifVisible = true;
        },
        // 当日
        getDateTime() {
            const todayM = new Date();
            const todayN = new Date();

            todayM.setHours(0);
            todayM.setMinutes(0);
            todayM.setSeconds(0);

            todayN.setHours(23);
            todayN.setMinutes(59);
            todayN.setSeconds(59);

            return {
                todayM,
                todayN
            };
        },
        save() {
            const params = Object.assign({}, { type: this.type }, this.recommendQuery, this.editData);

            let $modelPromise = '';
            if(params.lr_id) {
                params.id = params.lr_id;
                $modelPromise = KeywordRecommendModel.update(params).$promise;
            }
            else {
                $modelPromise = KeywordRecommendModel.save(params).$promise;
            }

            $modelPromise.then(res => {
                this.ifVisible = false;
                if(res.code && res.code !== 200) {
                    this.$message.error(res.message);
                }
                else {
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    });

                    this.$emit('loadItems');
                }
            })
            .catch(err => {
                this.$message.error(err);
            });
        },
        remoteMethod(query) {
            if(query !== '') {
                this.loading = true;
                const params1 = Object.assign({}, {
                    label: query
                }, this.keywordQuery);
                const params2 = Object.assign({}, {
                    label_id: query
                }, this.keywordQuery);

                Promise.all([
                    KeywordModel.query(params1).$promise,
                    KeywordModel.query(params2).$promise
                ])
                .then(([res1, res2]) => {
                    this.loading = false;
                    this.options = [...res1.items, ...res2.items];
                })
                .catch(err => {
                    this.$message.error(err);
                });
            }
            else {
                this.options = [];
            }
        }
    },
};
</script>

